<template>
  <div class="answerAudio" v-if="$utils.getVarType.isObjEmpty(detail)">
    <audio
      :src="voiceAttachUrl"
      ref="music"
      id="music"
      preload
      loop="loop"
    ></audio>
    <img
      class="musicIcon isPlayIcon"
      v-show="isPlay"
      :src="detail.audioOpenImageId"
      alt=""
      @click="pause"
    />

    <img
      class="musicIcon"
      v-show="!isPlay"
      :src="detail.audioCloseImageId"
      alt=""
      @click="play"
    />
  </div>
</template>

<script>
export default {
  props: {
    isPlay: { type: Boolean, default: false },
    detail: { type: Object },
  },
  data() {
    return {
      music: "",
      voiceAttachUrl: null, //音乐地址
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.music = this.$refs.music;
  },
  watch: {},
  methods: {
    getData() {
      this.voiceAttachUrl =
        "https://file.chtfund.com.cn/group2/M00/00/5C/rBDFX2EKMeOAEp3uAAeyTJh7apY955.mp3";
    },
    play() {
      this.music.play();
      this.$emit("mediaControl", true);
    },
    pause() {
      this.music.pause();
      this.$emit("mediaControl", false);
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.answerAudio {
  .musicIcon {
    width: 0.64rem;
    height: 0.64rem;
  }

  .isPlayIcon {
    animation: changDeg 2.5s linear 0.2s infinite;
  }

  @keyframes changDeg {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}
</style>